<template>
  <div class="wrapper">
    <comp-pagetitle>预约试驾</comp-pagetitle>
    <div class="content-box">
      <div class="smalltitle">选择车系</div>
      <ul class="car-box">
        <li
          v-for="(item, index) in carlist"
          :key="item.id"
          @click="
            carindex = index;
            typeindex = 0;
          "
          :class="carindex == index ? 'active' : ''"
        >
          <i
            class="el-icon-circle-check"
            v-show="carindex == index ? true : false"
          ></i>
          <h4>{{ item.title }}</h4>
          <img :src="item.picUrl" alt="" />
          <p>{{ item.types }}</p>
        </li>
      </ul>
      <div class="smalltitle">选择车型</div>
      <ul class="types">
        <li
          :class="typeindex == index ? 'active' : ''"
          v-for="(item, index) in carlist[carindex].children"
          :key="item.price"
          @click="typeindex = index"
        >
          <i
            class="el-icon-circle-check"
            v-show="typeindex == index ? true : false"
          ></i>
          <h4>{{ item.typename }}</h4>
          <p>{{ item.banben }}</p>
          <p>{{ item.price }}</p>
        </li>
      </ul>
      <div class="smalltitle">填写信息</div>
      <div class="form">
        <div class="from-grop">
          <label>姓名：</label
          ><input type="text" placeholder="请填写您的姓名" v-model="uname" />
        </div>
        <div class="from-grop">
          <label>称谓：</label
          ><input type="radio" name="gender" value="0" checked/>先生<input
            type="radio"
            name="gender"
            value="1"
          />女士
        </div>
        <div class="from-grop">
          <label>手机号码：</label
          ><input type="text" placeholder="请填写您的手机号码" v-model="phone" />
        </div>
        <div class="from-grop">
          <label>所在省份：</label
          ><select class="select-prov" @click="provclick($event)">
            <option v-for="item in localname" :key="item.id" :value="item.id">{{item.provname}}</option>
          </select>
        </div>
        <div class="from-grop">
          <label>所在城市：</label
          ><select class="select-city">
            <option v-for="item,index in localname[provindex].citylist" :key="item" :value="index">{{item}}</option>
          </select>
        </div>
        <div class="from-grop">
          <label>经销商：</label
          ><select class="select-dealer" disabled><option value="1">雷克萨斯专营店</option></select>
        </div>
        <div class="from-grop">
          <label>计划购车时间：</label
          ><select class="select-time">
            <option value="1">一个月之内</option>
            <option value="2">三个月之内</option>
            <option value="3">半年之内</option>
            <option value="4">暂无计划</option>
          </select>
        </div>
        <div class="from-grop">
          <label>希望得到反馈时间：</label
          ><input type="radio" name="timeday" value="0" checked/>工作日<input
            type="radio"
            name="timeday"
            value="1"
          />双休日<input type="radio" name="timeday" value="2" />全天候
        </div>
        <div class="from-grop">
          <input
            type="checkbox" ref="checkbox"
          /> <span>本人同意将此表格的信息提供给丰田汽车(中国)投资有限公司，并同意此等信息可由丰田汽车(中国)投资有限公司向LEXUS雷克萨斯中国经销商．授权第三方(包括但不限于供应商、代理人等)共享。本人同意丰田汽车(中国)投资有限公司及其LEXUS雷克萨斯中国经销商向本人发送相关商业性信息。
        </span>
          </div>
        <div class="from-grop"><button @click="tijiao">提交</button></div>
      </div>
    </div>
    
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CompPagetitle from "@/components/comp-pagetitle.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "Drive",
  data() {
    return {
      uname:"",
      phone:"",
      carindex: 0,
      typeindex: 0,
      provindex:0
    };
  },
  components: {
    CompPagetitle,
    CompFooter,
  },
  computed: {
    ...mapState(["carlist","localname"]),
  },
  methods:{
    provclick(event){
      if(event.target.value<9000010){
        this.provindex = event.target.value.slice(-1)-1
      }else{
        this.provindex = event.target.value.slice(-2)-1
      }
    },
    tijiao(){
      if(this.uname == "" && this.phone=="" ){
        alert("请填写完整信息")
      }
      if(this.$refs.checkbox.checked!=true){
        alert("请同意协议")
      }
      if(this.uname != "" && this.phone!=""&&this.$refs.checkbox.checked==true){
        alert("提交成功，感谢您的支持！！！")
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1140px;
  margin: 0 auto;
}
.content-box {
  margin-top: 60px;
}
.smalltitle {
  background-color: #f3f3f3;
  height: 45px;
  line-height: 45px;
  margin-bottom: 20px;
  color: #666;
  text-indent: 20px;
}
.car-box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  li {
    width: 270px;
    height: 171px;
    padding: 20px 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
    i {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 25px;
      color: #29ddd1;
    }
    h4 {
      color: #6f666b;
    }
    img {
      height: 76px;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      color: rgb(114, 114, 114);
    }
  }
  li:hover {
    background-color: #f8f8f8;
  }
  li.active {
    background-color: #f8f8f8;
    border: 1px solid #29ddd1;
  }
  li:nth-child(4n) {
    margin-right: 0px;
  }
}
.types {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  li {
    text-align: center;
    width: 173px;
    height: 91px;
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    i {
      position: absolute;
      right: 5px;
      bottom: 5px;
      font-size: 25px;
      color: #29ddd1;
    }
    h4 {
      margin-top: 5px;
      font-size: 20px;
      color: #666;
    }
    p {
      color: #666;
      margin-top: 5px;
      font-size: 14px;
    }
  }
  li:hover {
    background-color: #f8f8f8;
  }
  li.active {
    background-color: #f8f8f8;
    border: 1px solid #29ddd1;
  }
  li:nth-child(6n) {
    margin-right: 0px;
  }
}
.form {
  width: 1140px;
  height: 606px;
  border: 1px solid #ccc;
  padding: 40px 290px 10px;
  box-sizing: border-box;
}
.from-grop {
  margin-bottom: 20px;
  font-size: 15px;
  input[type="text"] {
    width: 267px;
    height: 34px;
    padding: 6px 12px;
    box-sizing: border-box;
    outline: none;
    border-radius: 5px;
    border: 1px solid#ccc;
  }
  select{
    width: 267px;
    height: 34px;
    padding: 6px 12px;
    box-sizing: border-box;
    outline: none;
    border-radius: 5px;
    border-color: #ccc;
  }
  label {
    width: 150px;
    text-align: right;
    margin-right: 20px;
    display: inline-block;
    color: rgb(63, 55, 55);
    font-weight: 600;
  }
  button {
    margin-left: 200px;
    background: #f7f7f7;
    padding: 6px 50px;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 5px;
    cursor: pointer;
  }
  span{
    vertical-align: top;
    display: inline-block;
    width: 500px;
  }
}
</style>